<template>
  <div class="">
    <div class="cardHeader">
      <img class="cardHeader_icon m_hoverCP" src="@assets/img/img28.png" alt="" @click="onBack"/>
      <span class="m_hoverCP" @click="onBack">{{ $t('message.Return') }}</span>
    </div>
    <section class="contentBox">
      <div class="content_left">
        <section class="tpyzxxBox">
          <div class="titleBox">{{ $t('message.Carbon_emission_factor_information') }}</div>
          <div class="box1">
            <img class="box1_icon m_hoverCP" src="@assets/img/img25.png" alt="" @click="onCopy()"/>
            <img class="box1_icon m_hoverCP" src="@assets/img/img11.png" alt="" @click="onCollect()"
                 v-if="dataSource.collectStatus === '1' && dataSource.emissionFactorObject.type == 1"/>
            <img class="box1_icon m_hoverCP" src="@assets/img/img12.png" alt="" @click="onCollect()"
                 v-if="dataSource.collectStatus === '0' && dataSource.emissionFactorObject.type == 1"/>
          </div>
          <section class="box2">
            <div class="box2_tr1">
              <div class="box2_tr1_text1"> {{ dataSource.emissionFactorObject.name }}</div>
            </div>
            <div class="box2_tr2">
              <div class="box2_tr2_text1">
                <div class="box2_tr2_text1_a"> {{
                    (Number(dataSource.emissionFactorDataObject.factorValue)).toFixed(4)
                  }}
                </div>
                <div class="box2_tr2_text1_b">
                  {{
                    dataSource.emissionFactorDataObject.numeratorUnit
                  }}/{{ dataSource.emissionFactorDataObject.denominatorUnit }}
                </div>
              </div>
              <div class="box2_tr2_text2" v-if="dataSource.emissionFactorObject.type == 1">
                {{ $t('message.Carbon_emission_factor_library') }}/{{ dataSource.emissionFactorDatabaseDict }}
              </div>
              <div class="box2_tr2_text2" v-if="dataSource.emissionFactorObject.type == 2">
                {{ $t('message.Tissue_factor_library') }}/{{ dataSource.emissionFactorDatabaseDict }}
              </div>
            </div>
          </section>
          <section class="box3">
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Specifications_and_models') }}:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.model || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Applicable_industries') }}:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.industry || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Product_classification') }}:</div>
              <div class="box3_item_content">{{ dataSource.productClassificationDict || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Applicable_scenario') }}:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.scene || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.GWP_version') }}:</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.gwpVersionDict || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Emission_factor_category') }}:</div>
              <div class="box3_item_content">{{ dataSource.categoryDict || '-' }}</div>
            </div>
          </section>

          <div class="gas_table">
            <a-table :columns="columns" :dataSource="dataSource.gasList" :pagination="false" :bordered="false" rowKey="id"
                     size="middle">
              <div slot="factorValue" slot-scope="text, record">{{ (Number(record.factorValue)).toFixed(4) }}</div>
              <div slot="theUnit" slot-scope="text, record">
                {{ record.molecularUnit }}/{{ record.denominatorUnit }}
              </div>
              <div slot="gwpValue">
                <div class="m_ccFlex">
                  {{ $t('message.GWP_value') }}
                  <a-popover placement="bottomRight">
                    <template slot="content">
                      <div class="popoverBox">
                        <img class="popoverBox_icon m_hoverCP" src="@assets/img/img32.png" alt=""/>
                        <div class="popoverBox_text">
                          <div class="popoverBox_text_a"> {{ $t('message.description') }}</div>
                          <div class="popoverBox_text_b"> {{ $t('message.tip2') }}</div>
                        </div>
                      </div>
                    </template>
                    <a-icon type="question-circle" style="margin-left: 8px;transform: translateY(1px);"/>
                  </a-popover>
                </div>
              </div>
            </a-table>
          </div>
        </section>

        <section class="lyxxBox">
          <div class="titleBox2">{{ $t('message.Source_information') }}:</div>
          <section class="box3">
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Publishing_agency') }}</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.releaseOrg || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Release_year') }}</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.releaseYear || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Document_type') }}</div>
              <div class="box3_item_content">{{ dataSource.docTypeDict || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Source_type') }}</div>
              <div class="box3_item_content">{{ dataSource.sourceTypeDict || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Country_organization') }}</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.ownership || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Source_file') }}</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.sourceFile || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Source_URL_link') }}</div>
              <div class="box3_item_content">{{ dataSource.emissionFactorObject.sourceUrlLink || '-' }}</div>
            </div>
            <div class="box3_item">
              <div class="box3_item_label">{{ $t('message.Attachment') }}</div>
              <div class="box3_item_content">
                <j-upload v-model="dataSource.emissionFactorObject.attachments" disabled :number="3"></j-upload>
              </div>
            </div>
          </section>
        </section>
      </div>
      <section class="xgtjBox">
        <div class="titleBox">{{ $t('message.Related_recommendation') }}</div>
        <div class="box5">
          <div class="box5_item" v-for="(item, index) in topSearchFactorData" :key="index" @click="onDetail(item)">
            <yzCard :item="item" @change="getData" :isSame="dataSource.emissionFactorObject.id == item.id"></yzCard>
          </div>
        </div>
      </section>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'
import { deleteAction, getAction, postAction } from '@/api/manage'
import yzCard from '@comp/common/yzCard.vue'
import { copyText } from '@/utils/util'

export default {
  name: 'tpyzDetail',
  components: {
    yzCard,
  },
  data() {
    return {
      visible: false,
      columns: [{
        title: this.$t('message.Greenhouse_gas_type'),
        align: 'center',
        dataIndex: 'gasName',
      }, {
        title: this.$t('message.Factor_value'),
        align: 'center',
        dataIndex: 'factorValue',
        scopedSlots: { customRender: 'factorValue' },
      }, {
        title: this.$t('message.Factor_unit'),
        align: 'center',
        scopedSlots: { customRender: 'theUnit' },
      }, {
        align: 'center',
        dataIndex: 'gwpValue',
        slots: { title: 'gwpValue' },
      }],
      dataSource: {
        emissionFactorDataObject: {},
        emissionFactorObject: {},
        gasList: [],
      },
      topSearchFactorData: [],
      isShouCang: false,
      detailIndex: 0, // 当前详情索引
      detailKeys: [], // 当前详情所有keys
      fangLianDian: true,
    }
  },
  created() {
  },
  methods: {
    /**
     * 下一级
     */
    onDetail(item) {
      if (this.detailKeys[this.detailIndex] == item.id) {
        return
      }
      if (this.fangLianDian) {
        this.detailIndex = this.detailIndex + 1
        this.detailKeys.push(item.id)
        this.getData()
      }
    },
    /**
     * 返回上一级
     */
    onBack() {
      if (this.fangLianDian) {
        if (this.detailIndex == 0) {
          this.$emit('back')
        } else {
          this.detailIndex = this.detailIndex - 1
          this.detailKeys.pop()
          this.getData()
        }
      }
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    getData(ShouCang) {
      let url = ''
      if (ShouCang) {
        this.isShouCang = true
        url = '/CyEmissionFactorCollect/cyEmissionFactorCollect/queryById'
      } else {
        url = '/emission/factor/cyEmissionFactor/listInfo'
      }
      this.fangLianDian = false
      getAction(url, {
        id: this.detailKeys[this.detailIndex]
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result || {}
          if (ShouCang) {
            this.dataSource.collectStatus = '1'
          }
        }
      }).finally(() => {
        this.fangLianDian = true
      })

      // 热门搜索因子
      getAction('/emission/factor/cyEmissionFactor/topSearchFactor', {
        SearchNum: 4,
        token: Vue.ls.get(ACCESS_TOKEN),
      }).then((res) => {
        if (res.success) {
          this.topSearchFactorData = res.result || []
        }
      })
    },
    /**
     * 复制
     */
    onCopy(item, index) {
      let copyMsg = `${this.dataSource.emissionFactorObject.name} ${this.dataSource.emissionFactorDataObject.factorValue} ${this.dataSource.emissionFactorDataObject.numeratorUnit}/${this.dataSource.emissionFactorDataObject.denominatorUnit}`
      copyText(copyMsg)
    },
    /**
     * 收藏
     */
    onCollect() {
      if (this.fangLianDian) {
        if (this.dataSource.collectStatus === '1') {
          // 取消收藏
          deleteAction('/CyEmissionFactorCollect/cyEmissionFactorCollect/delete', {
            id: this.dataSource.emissionFactorObject.id,
          }).then((res) => {
            if (res.success) {
              this.$message.success(this.$t('message.delete_collect_success'))
              // this.$set(this.dataSource, 'collectStatus', '0')
              if (this.isShouCang) {
                this.onBack()
              } else {
                console.log('qqqqq')
                this.getData()
              }
            }
          })
        } else {
          // 收藏
          getAction('/CyEmissionFactorCollect/cyEmissionFactorCollect/add', {
            id: this.dataSource.emissionFactorObject.id,
          }).then((res) => {
            if (res.success) {
              this.$message.success(this.$t('message.collect_success'))
              // this.$set(this.dataSource, 'collectStatus', '1')
              if (this.isShouCang) {
                this.onBack()
              } else {
                console.log('wwwww')
                this.getData()
              }
            }
          })
        }
      }
    },
  },
}

</script>

<style lang="less" scoped>
.cardHeader {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;

  .cardHeader_icon {
    width: 16px;
    height: 16px;
  }
}

.contentBox {
  margin-top: 24px;
  display: flex;
  gap: 24px;

  .content_left {
    flex: 1;
  }

  .tpyzxxBox {
    padding: 32px 24px;
    background: #FFFFFF;
    border-radius: 3px;
  }

  .lyxxBox {
    margin-top: 24px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 3px;
  }

  .xgtjBox {
    //box-sizing: border-box;
    width: 430px;
    //height: fit-content;
    padding: 32px 24px;
    background: #FFFFFF;
    border-radius: 3px;
  }

  .titleBox {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: #333333;
  }

  .titleBox2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #888888;
  }

  .titleBox3 {
    margin-top: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }

  .box1 {
    margin-top: 3px;
    margin-bottom: 3px;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
  }

  .box1_icon {
    width: 18px;
    height: 18px;
  }
}

.box2 {
  padding: 20px;
  background: rgba(43, 164, 113, 0.1);

  .box2_tr1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .box2_tr1_text1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }

  .box2_tr1_text2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #148958;
  }

  .box2_tr2 {
    margin-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .box2_tr2_text1 {
    display: flex;
    align-items: flex-end;
  }

  .box2_tr2_text1_a {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36px;
    color: #148958;
    line-height: 36px;
  }

  .box2_tr2_text1_b {
    margin-left: 13px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }

  .box2_tr2_text2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #888888;
  }
}


.box3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .box3_item {
    display: flex;
    align-items: center;

    margin-top: 24px;
    width: 49%;
  }

  .box3_item_label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #888888;
  }

  .box3_item_content {
    margin-left: 12px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}
.gas_table {
  margin-top: 24px;
}

.box4 {
  .box4_item {
    display: flex;
    align-items: flex-start;
    margin-top: 16px;
  }

  .box4_item_label {
    width: 200px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }

  .box4_item_content {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}

.box5 {
  .box5_item {
    margin-top: 24px;
  }
}


.box6 {
  margin-bottom: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 34px;
  background: rgba(43, 164, 113, 0.1);

  .box6_left {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }

  .box6_right {
    display: flex;
    align-items: flex-end;
  }

  .box6_right_text1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36px;
    color: #148958;
    line-height: 36px;
  }

  .box6_right_text2 {
    margin-left: 13px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
}


.popoverBox {
  display: flex;
  align-items: flex-start;

}

.popoverBox_icon {
  width: 20px;
  height: 20px;
}

.popoverBox_text {
  margin-left: 8px;
}

.popoverBox_text_a {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
}

.popoverBox_text_b {
  margin-top: 8px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}


/deep/ .ant-upload {
  display: none;
}

</style>
